<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐在自学</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/topbar.css">
    <link rel="stylesheet" href="/static/css/mylearn.css">
    <link rel="stylesheet" href="/static/layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="/static/layui_ext/dtree/font/dtreefont.css">
    <script src="/static/layui/layui.js"></script>


</head>

<body>
<!-- 头部引入 -->
<div th:insert="~{_topbar :: topbar}" id="topbar"></div>
<div class="nav-container">
    <div style="height: 10px;clear: both;"></div>
    <div class="layui-row">
        <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
            <div class="div-tree">
                <div id="treeMenus"></div>
            </div>
        </div>
        <div class="layui-col-xs9 layui-col-sm9 layui-col-md9 div-border-left">
            <!-- 课程介绍-->
            <div id="clourseInfo" style="background-color: #e7e7e7;">
                <div class="content-box1200">
                    <div class="courseResume pos-r">
                        <div class="courseLogo va-t mr-30">
                            <div class="image">
                                <img th:src="${items.logo}" th:alt="${items.name}">
                            </div>
                            <div class="shareAndfollow">
                                <div class="bdsharebuttonbox va-m"
                                     style="line-height: 28px; display: inline-block; vertical-align: middle; margin-top: 2px;"
                                     ><a href="#" class="bds_more va-m" >
                                    <i class="layui-icon layui-icon-senior"></i> 分享</a></div>
                                <a id="courseLike" href="javascript:;" class="like va-m">
                                    <i class="layui-icon layui-icon-rate-solid"></i> <span class="va-m">关注</span></a>
                            </div>
                        </div>
                        <div class="courseInfo va-t">
                            <div class="title" th:text="${items.name}">
                                AE CC2019入门到精通教程
                            </div>
                            <div class="countNum">
<!--                                <span class="mr-10 va-m">共<b class="c-danger">111</b>小节</span>-->
                                <span class="mr-10 va-m">已有<b class="c-danger" th:text="${items.courseHeat}">130347</b>人学过</span>
                                <span class="mr-10 va-m">[[${items.time}]]推出</span>
                            </div>
                            <div class="target" style="margin-top: 20px;">
                                <div class="f-14">课程概要</div>
                                <div class="description" th:utext="${items.descript}">
                                </div>
                            </div>
                        </div>

                        <div class="pos-a rightTop">
                            <a href="#" target="_blank">
                                <span class="rect va-m f-16">$</span>
                                <span class="va-m">充值币</span>
                            </a>
                        </div>
                    </div>
<!--                    属性信息-->
                    <div class="verInfo">
                        <div class="Ptable-item" th:each="group:${items.attrGroupVos}">
                            <h3 th:text="${group.groupName}">规格参数</h3>
                            <dl>
                                <dl class="clearfix" style="margin:0" th:each="attr:${group.attrVos}">
                                    <dt th:text="${attr.attrName}">容量</dt>
                                    <dd th:text="${attr.attrValue}">500ml</dd>
                                </dl>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
            <!--课程步骤内容-->
            <div id="hiddenDept" style="display: none" >
                <div id="department" th:fragment="department">
                    <div class="div-info">
                        <h2 class="title" th:text="${step==null?'':step.stepName}">方法重载</h2>
                        <p class="peopleNum">阅读: [[${step==null?'':step.readNum}]],更新时间：[[${step==null?'':step.contTime}]]</p>
                        <hr class="layui-bg-cyan">
                        <p class="info" th:utext="${step==null?'':step.readContent}">

                        </p>
                    </div>
                </div>
                    <!--       评论         -->
                    <div class="layui-row message-fluid">
                        <hr class="layui-bg-cyan">
                        <div class="layui-col-md12">

                            <div style="margin-bottom: 20px; width: 100%;">
                                <textarea class="layui-textarea" id="desc" style="display: none"></textarea>
                            </div>
                            <div class="site-demo-button" style="margin-top: 20px; text-align: end;">
                                <button class="layui-btn layui-btn-radius layui-btn-lg layui-btn-normal site-layedit"
                                        data-type="content">发表
                                </button>
                            </div>

                        </div>
                        <div class="layui-col-md12  message-content">
                            <div class="media-body">
                                <a href="javascript:;" class="media-left" style="float: left;">
                                    <img src="../images/mychart1.png" height="46px" width="46px">
                                </a>
                                <div class="pad-btm">
                                    <p class="fontColor"><a href="javascript:;">胡歌</a></p>
                                    <p class="min-font">
                                    <span class="layui-breadcrumb" lay-separator="-" style="visibility: visible;">
                                        <a href="javascript:;" class="layui-icon layui-icon-cellphone"></a><span
                                            lay-separator="">-</span>
                                        <a href="javascript:;">从移动</a><span lay-separator="">-</span>
                                        <a href="javascript:;">11分钟前</a>
                                    </span>
                                    </p>
                                </div>
                                <p class="message-text">历经打磨，@索尼中国
                                    再献新作品—OLED电视A8F完美诞生。很开心一起参加了A8F的“首映礼”！[鼓掌]正如我们演员对舞台的热爱，索尼对科技与艺术的追求才创造出了让人惊喜的作品。作为A1兄弟款，A8F沿袭了黑科技“屏幕发声技术”和高清画质，色彩的出众表现和高端音质，让人在体验的时候如同身临其境。A8F，这次的“视帝”要颁发给你！
                                    索尼官网预售： O网页链接 索尼旗舰店预售：</p>
                            </div>
                            <div class="media-body">
                                <a href="javascript:;" class="media-left" style="float: left;">
                                    <img src="../images/mychart1.png" height="46px" width="46px">
                                </a>
                                <div class="pad-btm">
                                    <p class="fontColor"><a href="javascript:;">胡歌</a></p>
                                    <p class="min-font">
                                    <span class="layui-breadcrumb" lay-separator="-" style="visibility: visible;">
                                        <a href="javascript:;" class="layui-icon layui-icon-cellphone"></a><span
                                            lay-separator="">-</span>
                                        <a href="javascript:;">从移动</a><span lay-separator="">-</span>
                                        <a href="javascript:;">11分钟前</a>
                                    </span>
                                    </p>
                                </div>
                                <p class="message-text">历经打磨，@索尼中国
                                    再献新作品—OLED电视A8F完美诞生。很开心一起参加了A8F的“首映礼”！[鼓掌]正如我们演员对舞台的热爱，索尼对科技与艺术的追求才创造出了让人惊喜的作品。作为A1兄弟款，A8F沿袭了黑科技“屏幕发声技术”和高清画质，色彩的出众表现和高端音质，让人在体验的时候如同身临其境。A8F，这次的“视帝”要颁发给你！
                                    索尼官网预售： O网页链接 索尼旗舰店预售：</p>
                            </div>
                            <div class="layui-row message-content-btn">
                                <a href="javascript:;" class="layui-btn layui-btn-radius layui-btn-normal">更多</a>
                            </div>
                        </div>

                    </div>
            </div>

        </div>
    </div>
</div>
<!-- 尾部引入 -->
<div th:insert="~{_endbar :: endbar}" id="endbar"></div>
</body>
<script th:inline="javascript">
    var msg = [[${items.stepStr}]];
</script>
<script>
    layui.extend({
        dtree: '{/}../layui_ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
    }).use(["jquery", 'dtree', 'layer', 'layedit', 'code'], function () {
        var $ = layui.$;
        var tree = layui.tree;
        var dtree = layui.dtree;
        var layer = layui.layer;
        var layedit = layui.layedit;

        //搜索按钮
        $("#search-i").on('click', function () {
            var keyword = $("#search-input").val();
            window.location.href = "http://search.lyfx.com/all-class?keyword=" + keyword;
        })

        layui.code({
            title: '乐在自学',
            about: false,
            encode: true, //是否转义html标签。默认不开启
            height: 280 //设置编辑器高度
        }); //引用code方法


        //上传图片接口
        layedit.set({
            uploadImage: {
                url: '' //接口url
                , type: '' //默认post
            }
        });
        /*
        {
            "code": 0 //0表示成功，其它失败
            ,"msg": "" //提示信息 //一般上传失败后返回
            ,"data": {
                "src": "图片路径"
                ,"title": "图片名称" //可选
            }
            }
        */
        //构建一个默认的编辑器
        var index = layedit.build('desc', {
            tool: ['face', 'link', 'unlink', '|', 'left', 'center', 'right', 'image']
            , height: 200
        });

        $('.site-layedit').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //编辑器外部操作
        var active = {
            content: function () {
                console.log(layedit.getContent(index)); //获取编辑器内容
            }
        };


        // 树形菜单
        // var data = []
        // 初始化树
        var DemoTree = dtree.render({
            elem: "#treeMenus",
            data: JSON.parse(msg), // 使用data加载
            skin: "laySimple",
            initLevel: 1,
            menubar: true,
            menubarTips: {
                group: ["moveDown", "moveUp", "refresh"]
            }
        });

        // 绑定节点点击
        dtree.on("node('treeMenus')", function (obj) {
            $("#clourseInfo").hide();
            $("#hiddenDept").show();
            //发送请求到对应请求路径
            $('#department').load("/mylearn/get/" + obj.param.nodeId);
        });


    })
</script>

</html>